<template>
    <div class="recommend-list-detil">
        <!-- 顶部导航栏 -->
        <div class="nav">
            <van-nav-bar left-arrow class="van-nav-bar" style=" height: 44px;" />
            <van-tabs v-model="active" class="van-tabs">
                <div class="nav-text">
                    <van-tab title="商品" class="van-tabs-content"></van-tab>
                    <van-tab title="详情" class="van-tabs-content"></van-tab>
                    <van-tab title="参数" class="van-tabs-content"></van-tab>
                </div>
            </van-tabs>
        </div>
        <!-- 轮播图 -->
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="/recommenddetil/lunbo1.jpg" />
                </van-swipe-item>
                <van-swipe-item>
                    <img src="/recommenddetil/lunbo2.jpg" />
                </van-swipe-item>
                <van-swipe-item>
                    <img src="/recommenddetil/lunbo3.jpg" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 文字详情 -->
        <div class="detil">
            <div class="detil-box">
                <div class="detil-top">
                    <span>飞科联名剃须刀</span>
                    <div class="img">
                        <img src="/recommenddetil/push.png" alt="">
                    </div>
                </div>
                <div class="detil-text">
                    <span>比亚迪定制</span>
                    <span>飞科剃须刀</span>
                    <span>立体浮动刀片</span>
                    <span>刚柔并济</span>
                    <span>IRX7全身水洗</span>
                    <span>商务精英</span>
                </div>
                <div class="detil-bottom">
                    <div class="detil-bottom-left">
                        <van-icon name="points" color="#ff0000" />
                        <span>3780</span>
                        <van-icon name="gold-coin" color="#ff0000" />
                        <span>189.00</span>
                    </div>
                    <div class="detil-bottom-right">
                        <span class="span">快递:包邮</span>
                    </div>
                </div>
            </div>

        </div>
        <!-- 商品详情 -->
        <div class="goods-detil">
            <span>商品详情</span>
            <div class="imgdetil">
                <img src="/recommenddetil/imgdetil1.jpg" alt="">
                <img src="/recommenddetil/imgdetil2.jpg" alt="">
                <img src="/recommenddetil/imgdetil3.jpg" alt="">
                <img src="/recommenddetil/imgdetil4.jpg" alt="">
                <img src="/recommenddetil/imgdetil5.jpg" alt="">
                <img src="/recommenddetil/imgdetil6.jpg" alt="">
                <img src="/recommenddetil/imgdetil7.jpg" alt="">
                <img src="/recommenddetil/imgdetil8.jpg" alt="">
                <img src="/recommenddetil/imgdetil9.jpg" alt="">
                <img src="/recommenddetil/imgdetil10.jpg" alt="">
                <img src="/recommenddetil/imgdetil11.jpg" alt="">
            </div>
            <div class="setting">
                <span>产品参数</span>
                <div>暂无参数说明</div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <div class="tab">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" />
                <div class="right-button">
                    <van-goods-action-button color="#be99ff" text="加入购物车" />
                    <van-goods-action-button color="#66ccff" text="立即兑换" />
                </div>
            </van-goods-action>
        </div>
        <!-- 固定车车 -->
        <div class="cart">
            <van-icon name="shopping-cart-o" size="20" />
        </div>
    </div>
</template>

<script>
// import Vue from 'vue';
// import { Lazyload } from 'vant';
// Vue.use(Lazyload);
export default {
    data() {
        return {
            active: 2,
            // images: [
            //     '../assets/recommenddetil/lunbo1.jpg',
            //     'https://img01.yzcdn.cn/vant/apple-2.jpg',
            // ],
        };
    },
};
</script>

<style lang="scss" scoped src="../assets/css/recommendlistdetil.scss">
</style>